import {
  Text,
  StyleSheet,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import Swiper from "react-native-swiper";
import React from "react";
import PageContainer from "@/components/PageContainer";
import { useRouter } from "expo-router"; // 引入 useRouter
import HeaderWithLanguageSelector from "@/components/HeaderWithLanguageSelector";
import { useTranslation } from "react-i18next";
import { queryLatestMarketConditionFnAPi } from "../api/maret";
import { ToastAPI } from "@/components/Toast";
import AsyncStorage from "@react-native-async-storage/async-storage";
export default function Index() {
  const { t } = useTranslation();
  const router = useRouter();
  const [latestMarketConditionList, setLatestMarketConditionList] =
    React.useState<any[]>([]);
  const getLatestMarketCondition = async () => {
    ToastAPI.loading(t("common.loading"), "center", -1);
    try {
      const queryLatestMarketConditionFnAPiRes: any =
        await queryLatestMarketConditionFnAPi();
      ToastAPI.close();
      if (queryLatestMarketConditionFnAPiRes.code === 0) {
        setLatestMarketConditionList(
          queryLatestMarketConditionFnAPiRes?.result || []
        );
      } else {
        ToastAPI.error(
          queryLatestMarketConditionFnAPiRes?.errMsg || t("common.loadFailed")
        );
      }
    } catch (error) {
      ToastAPI.close();
      // 捕获错误并关闭加载提示
      ToastAPI.error(JSON.stringify(error) || t("common.loadFailed"));
    }
  };
  React.useEffect(() => {
    getLatestMarketCondition();
  }, []);
  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="items-center flex-row h-[46px]">
          <Text className="w-[18px]"></Text>
          <View className="flex-1 flex-row justify-center">
            <Image
              source={require("@/assets/images/logo-icon.png")}
              className="w-[68px] h-[18px]"
            />
          </View>
          <HeaderWithLanguageSelector />
        </View>
        <ScrollView
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
        >
          <View>
            {/* 轮播图 */}
            <View className="w-full h-[146px] mt-[22px]">
              <Swiper
                autoplay
                autoplayTimeout={3}
                showsPagination
                dotStyle={{
                  backgroundColor: "rgba(255,255,255,0.5)",
                  width: 6,
                  height: 6,
                  borderRadius: 3,
                  marginLeft: 3,
                  marginRight: 3,
                }}
                activeDotStyle={{
                  backgroundColor: "#fff",
                  width: 6,
                  height: 6,
                  borderRadius: 3,
                  marginLeft: 3,
                  marginRight: 3,
                }}
              >
                <TouchableOpacity activeOpacity={0.9} className="flex-1">
                  <Image
                    source={require("@/assets/images/Swiper.png")}
                    className="w-full h-full rounded-xl"
                    resizeMode="cover"
                  />
                </TouchableOpacity>
              </Swiper>
            </View>
            <View className="mt-[13px]">
              <TouchableOpacity onPress={() => router.push("/market")}>
                <View className="justify-between items-center flex-row">
                  <View className="gap-[10px] items-center flex-row">
                    <Image
                      source={require("@/assets/images/rectangle.png")}
                      className="w-[3px] h-[18px]"
                    ></Image>
                    <Text className="text-[#fff] text-[18px] font-[bold]">
                      {t("home.latest_market")}
                    </Text>
                  </View>
                  <View className="flex-row gap-[2px] items-center">
                    <Text className="text-[#949494] text-[14px]">
                      {t("home.more")}
                    </Text>
                    <Image
                      source={require("@/assets/images/arrow-right.png")}
                      className="w-[18px] h-[18px]"
                    ></Image>
                  </View>
                </View>
              </TouchableOpacity>
            </View>
            <View className="mt-[22px] flex-row">
              <View className="flex-1">
                <Text className="text-[14px] text-[#949494]">
                  {t("home.currency")}
                </Text>
              </View>
              <View className="flex-row gap-[35px] items-center ">
                <View className="w-[84px]">
                  <Text className="text-[14px] text-[#949494] w-[84px] text-right">
                    {t("home.price")}
                  </Text>
                </View>
                <Text className="text-[14px] text-[#949494]  w-[84px]  text-right">
                  {t("home.change_rate")}
                </Text>
              </View>
            </View>
            {latestMarketConditionList.map((item, index) => (
              <TouchableOpacity
                key={index}
                onPress={async () => {
                  await AsyncStorage.setItem(
                    `detailData_${item.tradingId}`,
                    item?.assetProfile
                  );
                  // 跳转路由并携带参数
                  router.push({
                    pathname: "/market/marketdw",
                    params: {
                      tradingSymbol: item?.tradingSymbol,
                      tradingId: item?.tradingId,
                      secondaryAssetSymbol: item?.secondaryAssetSymbol,
                      mainAssetSymbol: item?.mainAssetSymbol,
                      price: item?.price,
                      changeRatio: item?.changeRatio,
                    },
                  });
                }}
              >
                <View className="mt-[13px] flex-row items-center mb-[25px]">
                  <View className="flex-1  flex-row gap-[5px]">
                    <Image
                      source={{
                        uri:
                          item?.logo ||
                          "https://t10.baidu.com/it/u=1563580236,1863594247&fm=199&app=68&f=JPEG?w=750&h=1000&s=43A23C6243C576E15FF911C60000E0A3",
                      }}
                      className="w-[25px] h-[25px] rounded-full"
                    ></Image>
                    <View className="flex-row gap-[5px] items-center">
                      <Text className="text-[#fff] text-[16px]">
                        {item?.mainAssetSymbol || "-"}
                      </Text>
                      <Text className="text-[#fff] text-[16px]">/</Text>
                      <Text className="text-[#9C9C9E] text-[16px]">
                        {item?.secondaryAssetSymbol || "-"}
                      </Text>
                    </View>
                  </View>
                  <View className="flex-row gap-[35px] items-center ">
                    <View className="w-[84px]">
                      {/* <Text className="text-[16px] text-[#fff] text-right">
                        3.0487
                      </Text> */}
                      <Text className="text-[14px] text-[#9C9C9E] text-right">
                        ¥{item?.price || "-"}
                      </Text>
                    </View>
                    <Text
                      className="w-[84px] text-center rounded-[5px] h-[35px] leading-[35px]"
                      style={{
                        backgroundColor:
                          item.changeRatio && parseFloat(item.changeRatio) < 0
                            ? "#EA4474"
                            : "#0BBB73",
                        color: "#fff",
                      }}
                    >
                      {parseFloat(item.changeRatio) < 0 ? "" : "+"}
                      {item?.changeRatio}%
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            ))}
            <View className="mt-[13px]">
              <View className="justify-between items-center flex-row">
                <View className="gap-[10px] items-center flex-row">
                  <Image
                    source={require("@/assets/images/rectangle.png")}
                    className="w-[3px] h-[18px]"
                  ></Image>
                  <Text className="text-[#fff] text-[18px] font-[bold]">
                    {t("home.help_center")}
                  </Text>
                </View>
              </View>
            </View>
            <View className="mt-[13px]">
              <View className="flex-row bg-[#1E1E20] rounded-[15px] items-center">
                <View className="px-[16px]">
                  <Image
                    source={require("@/assets/images/help1(1).png")}
                    className="w-[50px] h-[50px]"
                  ></Image>
                </View>
                <View className="w-[1px] bg-[#303030] h-full"></View>
                <View className="flex-1 ">
                  <TouchableOpacity
                    onPress={() =>
                      router.push({
                        pathname: "/set/help",
                        params: {
                          id: 1,
                        },
                      })
                    }
                  >
                    <View
                      style={{
                        borderBottomWidth: 1,
                        borderBottomColor: "#303030",
                      }}
                      className="py-[16px] px-[16px]"
                    >
                      <Text className="text-[16px] text-[#fff] ">
                        {t("home.forgot_login_password")}
                      </Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      router.push({
                        pathname: "/set/help",
                        params: { id: 2 },
                      });
                    }}
                  >
                    <View
                      style={{
                        borderBottomWidth: 1,
                        borderBottomColor: "#303030",
                      }}
                      className="py-[16px] px-[16px]"
                    >
                      <Text className="text-[16px] text-[#fff] ">
                        {t("home.unbind_bind_phone")}
                      </Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      router.push({
                        pathname: "/set/help",
                        params: { id: 3 },
                      });
                    }}
                  >
                    {" "}
                    <View className="py-[16px] px-[16px]">
                      <Text className="text-[16px] text-[#fff] ">
                        {t("home.identity_verification")}
                      </Text>
                    </View>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
            <View className="mt-[13px]">
              <View className="flex-row bg-[#1E1E20] rounded-[15px] items-center">
                <View className="px-[16px]">
                  <Image
                    source={require("@/assets/images/help1(2).png")}
                    className="w-[50px] h-[50px]"
                  ></Image>
                </View>
                <View className="w-[1px] bg-[#303030] h-full"></View>
                <View className="flex-1 ">
                  <TouchableOpacity
                    onPress={() => {
                      router.push({
                        pathname: "/set/help",
                        params: { id: 4 },
                      });
                    }}
                  >
                    <View
                      style={{
                        borderBottomWidth: 1,
                        borderBottomColor: "#303030",
                      }}
                      className="py-[16px] px-[16px]"
                    >
                      <Text className="text-[16px] text-[#fff] ">
                        {t("home.deposit_coins")}
                      </Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      router.push({
                        pathname: "/set/help",
                        params: { id: 5 },
                      });
                    }}
                  >
                    <View
                      style={{
                        borderBottomWidth: 1,
                        borderBottomColor: "#303030",
                      }}
                      className="py-[16px] px-[16px]"
                    >
                      <Text className="text-[16px] text-[#fff] ">
                        {t("home.withdraw_coins")}
                      </Text>
                    </View>
                  </TouchableOpacity>
                  {/* <TouchableOpacity onPress={()=>{
                    router.push({
                      pathname: '/set/help',
                      params: {id: 6}
                    }) 
                  }}
                  > <View className="py-[16px] px-[16px]">
                  <Text className="text-[16px] text-[#fff] ">
                    {t("home.buy_coins_one_click")}
                  </Text>
                </View>
                </TouchableOpacity> */}
                </View>
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </PageContainer>
  );
}

const styles = StyleSheet.create({});
